<template>
    <div class="header">
        <header>地址管理</header>
    </div>
    <ul class="addresslist">
        <li v-for="item in deliveryAddressArr" v-bind:key="item.daId" class="li">
          <div class="addresslist-left" @click="setDeliverAddress(item)">
            <h3>{{ item.contactName }}{{ itemContactSex }}{{ item.contactTel }}</h3>
            <p>{{ item.address }}</p>
          </div>
          <div class="addresslist-right">
            <i class="fa fa-edit" @click="editUserAddress(item.daId)"></i>
            <i class="fa fa-remove" @click="removeUserAddress(item.daId)"></i>
          </div>
        </li>
    </ul>
    <div class="addbtn" @click="toAddUserAddress">
        <i class="fa fa-plus-circle"></i>
        <p>新增收货地址</p>
    </div>
    <Footer></Footer>
</template>

<script>
export default{
    name:'userAddress',
    data(){
        return{
            businessId:this.$route.query.businessId,
            user:{},
            deliveryAddressArr:[]
        }
    },
    created(){
        this.user = this.$getSessionStorage('user');
        this.listDeliveryAddressByUserId();

    },
    computed:{
        itemContactSex(){
            return this.deliveryAddressArr.contactSex ==1?'先生':'女士';
        }
    },
    methods:{
        listDeliveryAddressByUserId(){
            this.$axios.post('DeliveryAddressController/listDeliveryAddressByUserId',this.$qs.stringify({
                userId:this.user.userId
            })).then(response =>{
                this.deliveryAddressArr = response.data;
                
            }).catch(error =>{
                console.error(error);
                
            });
            
        },
        setDeliverAddress(deliveryAddress){
            this.$setLocalStorage(this.user.userId,deliveryAddress);
            this.$router.push({path:'/Orders',query:{businessId:this.businessId}});

        },
        toAddUserAddress(){
            this.$router.push({path:'/addUserAddress',query:{businessId:this.businessId}})
        },
        editUserAddress(daId){
            this.$router.push({path:'/EditUserAddress',query:{businessId:this.businessId,daId:daId}});
        },
        removeUserAddress(daId){
            if(!confirm('确认要删除送货地址吗？')){
                return;
            }
            this.$axios.post('DeliveryAddressController/removeDeliveryAddress',this.$qs.stringify({
                daId:daId
            })).then(response =>{
                if(response.data>0){
                let deliveryAddress = this.$getSessionStorage(this.user.userId);
               if(deliveryAddress!=null && deliveryAddress.daId == daId){
                this.$removeLocalStorage(this.user.userId);
               }  
               this.listDeliveryAddressByUserId();
            }else{
                alert('删除地址失败');
            }
            }).catch(error =>{
                console.error(error);
                
            });
        }
    }


}



</script>
<style>
.addresslist{
    font-size: 30px;

}
.li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: cadetblue;
}
.addresslist-left{
    text-align: left;
}
.addresslist-right{
 padding-right: 50px;
  font-size: 40px;
}
.addbtn{
 display: flex;
 width: 500px;
 font-size: 30px;
 justify-content: center;
 align-items: center;
 margin-left: 500px;
 border: 1px solid black;
 background-color: #0097ff;
 color: white;
 margin-top: 200px;
}
</style>